<template>
  <div>
    <div class="noorder" v-if="a"></div>
    <div class="itm" id="c">
      <div class="details" v-for="(item, idex) in d" :key="idex">
        <img class="deim" src="../assets/01.webp" alt="" />&nbsp;
        幸运女孩手作的店 > <span class="shipped">{{ item.ostatus }}</span
        ><br />
        <div class="deta_2">
          <img class="deim2" src="../assets/01.webp" alt="" />
          <div class="deta_2_1">
            <span>{{ item.goodsname }}</span>
            <span class="price">￥{{ item.goodsprice }}</span>
            <br />
            <span class="design"
              >{{ item.size }}&nbsp;{{ item.colour }}&nbsp;{{
                item.model
              }}</span
            ><span class="pcs">x1</span>
            <br />
            <span class="sek"> 7天无理由退货 </span>
            <span class="sek"> 晚发必赔 </span>
          </div>
          <div class="deta_2_2">
            <div class="deta_2_2_1">
              <span>
                <img src="../assets/car.png" alt="" />&nbsp;
                <span>配送信息</span>
              </span>

              <span class="deta_2_2_1_1">04月21日14:26前发货</span>
            </div>
            <div class="deta_2_2_2"></div>
          </div>
        </div>
        <button class="delivery2">催发货</button>
      </div>
    </div>
  </div>
</template>

<script>
import { Order } from "@/api/Orde";
export default {
  data() {
    return {
      dele: [],
      d: [],
      a: true,
      phone:''
    };
  },
  mounted() {
    // 代发货
    this.Ord();
  },
  methods: {
    Ord() {
      let data = JSON.parse(localStorage.getItem("userphone"));
      this.phone =  data+'';
      console.log(this.phone);
      console.log(1233);
      Order({
        phonenum:this.phone,
      }).then((res) => {
        this.dele = res.result;
        console.log(this.dele);
        this.or();
        if (this.dele == "") {
          console.log(13);
          this.a = true;
        } else if (this.dele !== "") {
          console.log(12);
          this.a = false;
        }
      });
    },
    or() {
      console.log(this.dele);
      console.log(23);
      for (let i = 0; i < this.dele.length; i++) {
        if (this.dele[i].ostatus == "待发货") {
          this.d.push(this.dele[i]); //push()在数组末端添加一条数据
          console.log(this.d);
        }
      }
    },
  },
};
</script>

<style scoped>
.price {
  position: absolute;
  top: 0px;
  right: -50px;
}
.noorder {
  width: 400px;
  height: 180px;
  /* background: #000; */
  background-image: url(../assets/noorder.jpg);
  background-repeat: no-repeat;
  background-size: contain;
}
.pcs {
  position: absolute;
  top: 20px;
  right: -70px;
  color: silver;
}

.manin {
  margin-top: 15px;
  padding-top: 10px;
  background-color: rgba(191, 191, 191, 0.26);
}

.details {
  width: 350px;
  /* height: 270px; */
  background-color: white;
  margin: 10px auto;
  font-size: 14px;
  padding: 15px;
  box-sizing: border-box;
  position: relative;
  border-radius: 10px;
}

.details a {
  line-height: 0px;
  color: black;
  font-weight: 600;
}

.shipped {
  color: rgb(180, 0, 0);
  position: absolute;
  right: 15px;
  font-weight: 600;
}

.price {
  position: absolute;
  right: -50px;
}

.pcs {
  position: absolute;
  right: -50px;
  color: silver;
}

.deim {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.deim2 {
  width: 90px;
  height: 90px;
  margin-right: 5px;
  border-radius: 10px;
}

.deta_2 {
  margin-top: 15px;
  position: relative;
}

.deta_2_1 {
  width: 160px;
  position: absolute;
  top: 0;
  margin-left: 10px;
  display: inline-block;
}

.design {
  margin-top: 15px;
  font-size: 10px;
  color: rgb(160, 160, 160);
}

.sek {
  /* font-size: 8px !important; */
  transform: scale(0.7);
  /* margin-top: 8px; */
  padding: 2px;
  box-sizing: border-box;
  display: inline-block;
  border: 1px solid silver;
  margin-left: -15px;
}

.deta_2_2 {
  font-size: 12px;
  margin-left: 10px;
  margin-top: 10px;
}

.deta_2_2 img {
  width: 10px;
  height: 10px;
}

.deta_2_2_1 {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
}

/* 最晚发货事件 */
.deta_2_2_1_1 {
  color: silver;
}

.deta_2_2_2 {
  margin-bottom: 20px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.delivery2 {
  /* width: 80px; */
  padding: 5px 13px;
  height: 40px;
  text-align: center;
  font-size: 14px;
  line-height: 30px;
  border-radius: 30px;
  border: 1px solid rgb(211, 211, 211);
  background-color: white;
  position: absolute;
  right: 15px;
  bottom: 10px;
}
</style>